<template>
	<view>
		<!-- 搜索城市 -->
		    <view class="margin-search">
				<view class="serarch-cont">
					<view class="city-search">
						<view class="iconfont icon-sousuo"></view>
						<!-- <image src="../../static/images/搜索.svg" mode="widthFix" class="search-img"></image> -->
						<input type="text" placeholder="城市/区域/位置/摄影师/影楼(工作室)名" />
					</view>
					<view class="search-code">
						<view class="iconfont icon-chacha"></view>
						<!-- <image src="../../static/images/叉叉.svg" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
		<!-- 点击搜索隐藏 -->
		    <view>
		    <!-- 定位城市-->
			    <view class="city-view">
				    <view class="city-text">当前定位</view>
				    <view class="posit-city">
						<view class="iconfont icon-dingwei"></view>
					    <!-- <image src="../../static/images/定位.svg" ></image> -->
					    <text class="city-text">龙岩市</text>
				    </view>
			    </view>
			<!-- 历史搜索 -->
			    <view class="hot-city">历史搜索</view>
			    <view class="menu-block">
				    <block v-for="(item,index) in city" :key="index">
					    <view>{{item.name}}</view>
				    </block>
			    </view>
			<!-- 热门城市 -->
			    <view class="hot-city">热门城市</view>
			    <view class="menu-block">
				    <block v-for="(item,index) in city" :key="index">
					    <view>{{item.name}}</view>
				    </block>
			    </view>
			</view>
	</view>
</template>

<script>
	export default{
		name:'citying',
		data(){
			return{
				city:[
					{"name":'厦门市'},
					{"name":'漳州市'},
					{"name":'福州市'},
					{"name":'莆田市'},
					{"name":'宁德市'},
					{"name":'南平市'},
					{"name":'三明市'},
					{"name":'龙岩市'},
					{"name":'泉州市'},
				]
			}
		}
	}
</script>

<style scoped>
	page{background-color: #ffffff;}
	/* 搜索城市 */
	.margin-search{margin-bottom: 40rpx;}
	.city-search{
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		background: #f8f8f8;
		border-radius: 50rpx;
	}
	.search-img{margin: auto 0 auto 20rpx;width: 40rpx;height: 40rpx;}
	.city-search input{
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		font-size: 30rpx;
		color: #666666;
	}
	.serarch-cont{display: flex;justify-content: space-between;height: 70rpx;align-items: center;
	background: linear-gradient(to top,#ffe556 10%,#ffd300 100%);
	padding: 30rpx 20rpx;
	}
	.search-code image{width: 50rpx;height: 50rpx;}
	.search-code{width: 50rpx;height: 50rpx;padding: 0 15rpx;}
	
	/* 定位城市 */
	.city-view image{width: 40rpx;height: 40rpx;padding-right: 20rpx;}
	.city-text{font-size: 30rpx;color: #3f3f3f;}
	.posit-city{display: flex;align-items: center;padding-left: 35rpx;}
	.city-view{display: flex;align-items: center;
	background:#f7f7f7;
	padding: 20rpx 10rpx;
	margin: 0 20rpx;
	border-radius: 6rpx;}
	/* 热门城市 */
	.hot-city{font-size: 30rpx;color: #999999;margin: 50rpx  20rpx 0 20rpx;}
	.menu-block view{
		background: #f7f7f7;
		border-radius: 6rpx;
		font-size: 27rpx;
		color: #333333;
		text-align: center;
		padding: 15rpx;
		margin: 20rpx;
	}
	.menu-block{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
</style>